<template>
    <div>
        <el-table
			:data="students"
			stripe 
			style="margin: 20px auto;"
		>
			<el-table-column label="ID" prop="id"/>
			<el-table-column label="姓名" prop="name"/>
			<el-table-column label="出生日期" prop="birth"/>
			<el-table-column label="身份证号" prop="idnumber"/>
			<el-table-column label="生源地" prop="birth_place"/>
			<el-table-column label="本科专业" prop="undergraduate_major"/>
			<el-table-column label="邮箱" prop="email"/>
			<el-table-column label="电话" prop="phone"/>
			<el-table-column label="本科学校" prop="undergraduate_institution"/>
            <el-table-column label="本科学校类型" prop="institution_type"/>
            <el-table-column label="性别" prop="gender"/>
            <el-table-column label="个人简历" prop="resume"/>
            <el-table-column label="报考科目ID" prop="subject_id"/>
            <el-table-column label="报考科目名称" prop="subject_name"/>
            <el-table-column align="right" label="操作" width="200px">
                <template #default="scope">
                    <el-button 
                        size="small" 
                        @click="handleEdit(scope.$index, scope.row)"
                    >
                        编辑
                    </el-button>
                </template>
            </el-table-column>
		</el-table>


        <!-- 编辑页面 -->
        <el-dialog
            title="编辑信息"
            v-model="edit_dialog_visible"
            width="30%"
        >
            <el-form
                ref="editFormRef"
                :model="form"
                status-icon
                label-width="120px"
                class="demo-ruleForm"
            >
                <el-form-item label="姓名">
                    <el-input v-model="form.name" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="出生日期">
                    <!-- <el-input v-model="form.birth" autocomplete="off"/> -->
                    <el-date-picker
                        v-model="form.birth"
                        type="datetime"
                        placeholder="Select date and time"
                    />
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="form.idnumber" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="生源地">
                    <el-input v-model="form.birth_place" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="本科专业">
                    <el-input v-model="form.undergraduate_major" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="form.phone" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="本科学校">
                    <el-input v-model="form.undergraduate_institution" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="本科学校类型">
                    <el-input v-model="form.institution_type" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="form.gender" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="简历">
                    <el-input v-model="form.resume" autocomplete="off"/>
                </el-form-item>
                <!-- <el-form-item label="报考科目ID">
                    <el-input v-model="form.subject_id" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="报考科目">
                    <el-input v-model="form.subject_name" autocomplete="off"/>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="submitEditForm(editFormRef)">提交</el-button>
                    <el-button @click="resetForm(editFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
  
<script setup>
import {RouterView,RouterLink} from 'vue-router'
import axios from 'axios';
import { onMounted, ref, reactive } from 'vue'
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

const students = ref([])
const getStudents = () =>{
    const token = sessionStorage.getItem('token')
    axios.get("http://127.0.0.1:5000/students", {
        headers: {
            Authorization: `Bearer ${token}`
        }
    }).then(res => {
        console.log(res.data);
        students.value = res.data
    })
}

const getStudent = () =>{
    const token = sessionStorage.getItem('token')
    axios.get(`http://127.0.0.1:5000/students/${counter.user_id}`, {
        headers: {
            Authorization: `Bearer ${token}`
        }
    }).then(res => {
        console.log(res.data);
        students.value = res.data
    })
}

// 编辑表单
let edit_dialog_visible = ref(false)
const handleEdit = (index, row) => {
	for(let key in row) {
		form[key] = row[key]
	}
    console.log(form)
	edit_dialog_visible.value = true
}

const editFormRef = ref()
const form = reactive({
	
})

const submitEditForm = (formEl) => {
	const token = sessionStorage.getItem('token')
	axios.put(`http://localhost:5000/students/${form.id}`, form, {
		headers: {
			Authorization: `Bearer ${token}`
		}
	}).then((res) => {
        console.log('提交了')
		formEl.resetFields()
		edit_dialog_visible.value = false
        if(counter.role_id == 8) {
            getStudents()
        }
        else {
            getStudent(counter.user_id)
        }
	})
}

// 重置表单
const resetForm = (formEl) => {
	formEl.resetFields()
}


onMounted(() => {
    // getStudents(counter.user_id)
    // getStudent()
    if(counter.role_id == 8) {
        getStudents()
    }
    else {
        getStudent(counter.user_id)
    }
})
</script>
  
<style scoped>

</style>
  